<script setup lang="ts">
import { ref, Ref, reactive, toRefs, computed, getCurrentInstance } from 'vue'
const { proxy }: any = getCurrentInstance();//组合式 API 中获取 this 的替代方案
console.log(proxy.$filters,44)
const input = ref(null)
let fncFilter = function <T>(val: T): string {
  if (!!val) {
    return "方法代替过滤器"
  } else {
    return "";
  }

}

const computFliter = computed(() => {
  //当return一个函数时就可以接收参数
  return (val: string): string => {
    if (!!val) {
      return "计算属性代替过滤器";
    } else {
      return "";
    }

  }
})


</script>

<template>
  <!-- <h1>{{ msg }}</h1> -->
  <el-input v-model="input" placeholder="Please input" />
  <div>{{ fncFilter<string>(input as any) }}</div>
  <div>{{ computFliter(input as any) }}</div>
  <div>{{ proxy.$filters.filter1(input as any) }}</div>

</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
